<template>
	<view class="content" v-if="show">
		<view class="monitor" id="video-container">
		</view>
		<view style="position: fixed;top: 20px;right: 20px;bottom: 100px;height: 100px;width: 60px;z-index: 1;display: flex;flex-direction: column;align-items: center;">
			<view style="width: calc(100% - 10px);height: calc(50% - 10px);margin-top: 5px;overflow: hidden;background-color: #0686D8;display: flex;flex-direction: column;border-radius: 5px;align-items: center;text-align: center;">
				<view style="width: 100%;height: 50%;font-size: 30px;color: #fff;" @click="videoOper(8)">
					<text style="line-height: 100%;">+</text>
				</view>
				<view style="width: calc(100% - 10px);height: 50%;border-top: 0.5px solid #fff;font-size: 30px;color: #fff;" @click="videoOper(9)">
					<text style="line-height: 100%;">-</text>
				</view>
			</view>
			<view style="width: calc(100% - 10px);height: calc(50% - 10px);margin-top: 10px;display: flex;flex-direction: column;background-color: #0686D8;border-radius: 5px;">
				<view style="width: 100%;height: 33%;display: flex;">
					<view style="width: 100%;height: 100%;margin: auto;" @click="videoOper(0)">
						<image style="width: 100%;height: 100%;" src="../static/icon_021.png"
							mode="aspectFit"></image>
					</view>
				</view>
				<view style="width: 100%;height: 34%;display: flex;">
					<view style="width: 50%;height: 100%;display: flex">
						<view style="width: 100%;height: 100%;margin: auto;" @click="videoOper(2)">
							<image style="width: 100%;height: 100%;" src="../static/icon_022.png"
								mode="aspectFit"></image>
						</view>
					</view>
					<view style="width: 50%;height: 100%;display: flex;">
						<view style="width: 100%;height: 100%;margin: auto;" @click="videoOper(3)">
							<image style="width: 100%;height: 100%;" src="../static/icon_023.png"
								mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 34%;display: flex;">
					<view style="width: 100%;height: 100%;margin: 0 auto auto auto;" @click="videoOper(1)">
						<image style="width: 100%;height: 100%;" src="../static/icon_024.png"
							mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<view style="position: fixed;top: 20px;right: 20px;bottom: auto;height: 30px;width: 30px;z-index: 1;" @click="close()">
			<image src="../static/icon_035.png" mode="aspectFit" style="width: 30px;height: 30px;"></image>
		</view>
	</view>
</template>

<script>
	import EZUIKit from "ezuikit-js";
	export default {
		name: 'monitor',
		data() {
			return {
				show: false,
				player: null,
			};
		},
		props: {
			accessToken: {
				type: String,
				default: "",
			},
			serialNumber: {
				type: String,
				default: "",
			}
		},
		methods: {
			open() {
				this.show = true;
				this.playVideo();
			},
			videoOper(e) {
				this.$emit('videoOper', e);
			},
			playVideo() {
				// console.log(this.serialNumber);
				// console.log(this.accessToken);
				let serialNumber = this.serialNumber;
				if (this.player == null) {
					this.player = new EZUIKit.EZUIKitPlayer({
						autoplay: true,
						id: "video-container",
						accessToken: this.accessToken,
						url: 'ezopen://open.ys7.com/' + serialNumber + '/1.live',
						template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
						// 视频上方头部控件
						//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
						//plugin: ['talk'],                       // 加载插件，talk-对讲
						// 视频下方底部控件
						//footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
						//audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
						// openSoundCallBack: data => console.log("开启声音回调", data),
						// closeSoundCallBack: data => console.log("关闭声音回调", data),
						// startSaveCallBack: data => console.log("开始录像回调", data),
						// stopSaveCallBack: data => console.log("录像回调", data),
						// capturePictureCallBack: data => console.log("截图成功回调", data),
						//fullScreenCallBack: data => console.log("全屏回调", data),
						// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
						// width: 100%,
						// height: 100%,
					});
				}else {
					this.player.play('ezopen://open.ys7.com/' + serialNumber + '/1.live');
					// let that = this
					// this.player.stop().then(()=>{
					// 	this.player.play('ezopen://open.ys7.com/' + serialNumber + '/1.live');
					// })
				}
				
			},
			close() {
				this.show = false;
				this.player.stop();
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #000;
		position: relative;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;

		.monitor {
			width: calc(100%);
			height: calc(100%);
			z-index: 1;
		}
	}
</style>